<template>
    <div class="ticket-menu">
        <div class="ticketmenu_w">
            <div class="ticketmenu_n">
                <!-- 选项一 -->
                <div class="ticketmenu_xuanxiang1">
                    <h4 class="ticketmenu_biaotou">购买</h4>
                    <span class="ticketmenu_kaung1 ticketmenu_xuanfukaung">
                        <img class="ticketmenu_xiaokuangimg" src="../assets/images/ticketmenu/jiantouxia.png" alt="">
                        <b class="ticketmenu_xiaokuangword">{{tickets[$store.state.type].ticketname}}</b>
                        <ul class="ticketmenu_ul">
                            <li  @click="$store.commit('type_0')">门票</li>
                            <li  @click="$store.commit('type_1')" >年卡</li>
                            <li  @click="$store.commit('type_2')">礼品卡/礼品票</li>
                        </ul>
                    </span>
                </div>

                <!-- 选项二 -->
                <div class="ticketmenu_xuanxiang2">
                    <h4 class="ticketmenu_biaotou">选择产品</h4>
                    <span class="ticketmenu_kaung2 ticketmenu_xuanfukaung">
                        <img class="ticketmenu_xiaokuangimg" src="../assets/images/ticketmenu/jiantouxia.png" alt="">
                        <b class="ticketmenu_xiaokuangword">{{tickets[$store.state.type].ticketnamedetail[$store.state.detail].xuanxiang}}</b>
                        <ul class="ticketmenu_ul">
                            <li v-for="(a,tid) in tickets[$store.state.type].ticketnamedetail" :key="tid"   @click="$store.commit('detail',tid)">{{a.xuanxiang}}</li>
                            <!-- <li type="2">儿童长者票</li>
                            <li type="3">大学生门票</li>
                            <li type="4">自驾游车辆通行证</li> -->
                        </ul>
                    </span>
                </div>

                <!-- 选项三 -->
                <div class="ticketmenu_xuanxiang3">
                    <h4 class="ticketmenu_biaotou">选择日期</h4>
                    <span class="ticketmenu_kaung3">
                        <img class="ticketmenu_xiaokuangdateimg" src="../assets/images/ticketmenu/date.png" alt="">
                        <input  ref="date2" class="ticketmenu_input" type="date">
                    </span>
                </div>

                <!-- 选项四 -->
                <div class="ticketmenu_xuanxiang4">
                    <h4 class="ticketmenu_biaotou">选择数量</h4>
                    <span class="ticketmenu_kaung4">
                        <button @click="$store.commit('num_jian')"  
                        :disabled="$store.state.num==1"
                        class="ticketmenu_yuanquankuang">                    
                            <img src="../assets/images/ticketmenu/jian.png" alt="">
                        </button>
                        <h5 class="ticketmenu_yuanquankuang">{{$store.state.num}}</h5>
                        <button @click="$store.commit('num_jia')" 
                        class="ticketmenu_yuanquankuang">                    
                            <img src="../assets/images/ticketmenu/jia.png" alt="">
                        </button>
                    </span>
                </div>

                <!-- 确认选项 -->
                <div class="ticketmenu_queren">
                    <img class="ticketmenu_boy" src="../assets/images/ticketmenu/ticketboy.png" alt="">
                    <router-link class="ticketmenu_anniu" to="/buy">
                        <div class="ticketmenu_querenword">立即购票</div>
                        <img class="ticketmenu_jiantou1" src="../assets/images/ticketmenu/jiantouyou.jpg" alt="">
                        <img class="ticketmenu_jiantou2" src="../assets/images/ticketmenu/ticketanniu.jpg" alt="">
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defaultMaxListeners } from 'events';

    export default {
        data() {
            return {
                date:'',
                num: 1,
                type:0,
                detail:0,
                tickets:[
                    {tid:0,ticketname:"门票",ticketnamedetail:[{xuanxiang:'成人票',price:210,img:'https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg',biaoqian:'身份证入园,有条件退'},{xuanxiang:'儿童长者票',price:140,img:'https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg',biaoqian:'身份证入园,有条件退'},{xuanxiang:'大学生门票',price:180,img:'https://ts.hzsp.com/UploadFiles/Images/Products/191227458700.jpg',biaoqian:'身份证入园,有条件退'},{xuanxiang:'自驾游车辆通行证',price:220,img:'https://ts.hzsp.com/UploadFiles/Images/Products/191121919887.jpg',biaoqian:'身份证入园,有条件退'}]},
                    {tid:1,ticketname:"年卡",ticketnamedetail:[{xuanxiang:'成人年卡',price:680,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg',biaoqian:'激活使用,不限次'},{xuanxiang:'双人年卡',price:1360,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg',biaoqian:'激活使用,不限次'},{xuanxiang:'儿童长者年卡',price:420,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg',biaoqian:'激活使用,不限次'},{xuanxiang:'家庭年卡A',price:1780,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg',biaoqian:'激活使用,不限次'},{xuanxiang:'家庭年卡B',price:2200,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211202952929.jpg',biaoqian:'激活使用,不限次'}]},


                    {tid:2,ticketname:"礼品卡/礼品票",ticketnamedetail:[{xuanxiang:'2022礼品票',price:220,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211225745127.jpg',biaoqian:'实体票,不可修改'},{xuanxiang:'2022礼品卡-儿童长者年卡',price:420,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg',biaoqian:'激活使用,不限次,不可退改'},{xuanxiang:'2022礼品卡-成人年卡',price:680,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg',biaoqian:'激活使用,不限次,不可退改'},{xuanxiang:'2022礼品卡-双人年卡',price:1360,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg',biaoqian:'激活使用,不限次,不可退改'},{xuanxiang:'2022礼品卡-家庭年卡A',price:1780,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg',biaoqian:'激活使用,不限次,不可退改'},{xuanxiang:'2022礼品卡-家庭年卡B',price:2200,img:'https://ts.hzsp.com/UploadFiles/Images/Products/211225476321.jpg',biaoqian:'激活使用,不限次,不可退改'}]},
                ]
            }
        },
        methods:{

        }
    }
</script>

<style lang="scss" scoped>
// 整体外层样式
.ticketmenu_w{
    background-image: url(../assets/images/ticketmenu/ticketbg.jpg);
    background-repeat: no-repeat; 
    background-size: cover;
    border-radius: 15px;
    box-sizing: border-box;
    padding-top: 22px;
    padding-bottom:15px;
    height: 140px;
    width: 1500px;
    display: block;
    font-size: 14px;
    line-height: 1.42857143;
}

// 整体内层样式
.ticketmenu_n{
    width: 90%;
    height: 100%;
    margin-left: 5%
}

// 四个大的选框和一个确认按钮的样式
.ticketmenu_n>div[class*="xuanxiang"]{
    margin-right: 27px;
    height: 100%;
    margin-right: 2%;
    float: left;
}
.ticketmenu_xuanxiang1,.ticketmenu_xuanxiang2,.ticketmenu_xuanxiang3{
    width: 20%;
}
.ticketmenu_xuanxiang4,.ticketmenu_queren{
    width: 15%;
}

// 所有表头的设置
.ticketmenu_biaotou{
    font-size: 20px;
    color: #ffeb8c;
    font-weight: bold;
    line-height:1.1;
    // margin-block-start 属性有着和 margin-left 属性一样的值。
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-top: 10px;
    margin-bottom: 10px;
}

// 四个小选框的配置
.ticketmenu_kaung1,.ticketmenu_kaung2,.ticketmenu_kaung3,.ticketmenu_kaung4{
    display: block;
    width: 100%;
    height: 50px;
    // line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
    line-height: 48px;
    // text-indent 属性能定义一个块元素首行文本内容之前的缩进量。
    text-indent: 14px;
    border:2px solid #c0a285;
    border-radius:10px;
    cursor:pointer;
    position: relative;
    box-sizing: border-box;
}

// 前两个小选框内部文字样式
.ticketmenu_xiaokuangword{
    width:80%;
    height:50px;
    color:#fff;
    overflow:hidden;
    // text-overflow CSS 属性用于确定如何提示用户存在隐藏的溢出内容。其这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本
    text-overflow:ellipsis;
    font-weight:normal;
}

// 前两个小选框内部图片样式
.ticketmenu_xiaokuangimg{
    position:absolute;
    right: 20px;
    top:20px;
}

// 第三个小选框内部图片样式
.ticketmenu_xiaokuangdateimg{
    position:absolute;
    right: 20px;
    top:12px;
    vertical-align:middle;
}

// 前两个小选框多选框样式
.ticketmenu_ul{
    padding-left:0;
    margin-top: -6px;
    background: #fff;
    border:1px solid #ccc ;
    margin-bottom:10px;
    display:none;
    // font-size: 0;
    li{
        list-style:none;
        border-bottom: 1px solid #ccc;
        cursor:pointer;
        padding:10px;
        line-height:28px;
        // text-indent:0;
    }
}


// 前两个小选框多选框激活弹出样式
.ticketmenu_xuanfukaung:hover{
    ul{
      display:block;
    }
} 

// 第三个选框中的input
.ticketmenu_input{

}

//数量小框样式
.ticketmenu_yuanquankuang{
    float: left;
    display: block;
    width:33%;
    height: 100%;
    margin: 0 ;
    font-size: 14px;
    font-family: inherit;
    background-color: rgba(0,0,0,0);
    border: none;
    font-weight: 500;
    line-height: 50px;
    text-align: center;
    text-indent: 0;
    color: #fff;
    font-weight: bold;
    box-sizing: border-box;
    img{
        vertical-align: middle;
    }
}

//确认大框样式
.ticketmenu_queren{
    position: relative;
    width: 15%;
    float: left;
    top: 6px;
    margin-right: 27px;
    height: 100%;
    margin-right: 2%;
}

//ticketboy小图标样式
.ticketmenu_boy{
    position: absolute;
    top: 0;
    width: 120px;
    left: 50%;
    margin-left: -60px;
    top: -100px;
    z-index: 2;
    vertical-align: middle;
    border: 0;
    display: block;
}

//确认购票小按钮样式
.ticketmenu_anniu{
    float: right;
    width: 100%;
    margin-top: 35px;
    height: 50px;
    line-height: 50px;
    position: relative;
    
}

//确认购票小按钮文字样式
.ticketmenu_querenword{
    float: right;
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #d7551a;
    color: #d7551a;
    background-color: #fff;
    background-image: none;
    outline-offset: -2px;
    position: relative;
    text-align: center;
    display: block;
    z-index: 0;
    overflow: hidden;
    border-radius: 10px;
    font-size: 22px;
    font-weight: bold;
}

//按钮内部箭头样式
.ticketmenu_jiantou1{
    position: absolute;
    right: 20px;
    top: 13px;
}
.ticketmenu_jiantou2{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20px;
    vertical-align: middle;
    border-radius: 10px;
}

</style>